<template>
  <mt-popup v-model="popupVisible" position="right" :modal="false" class="popup-wrap">
    <div class="calendar-month-wrap">
      <customHeader middleTitle="月报" @leftCallBack="popupHide" :jsBridgeBack="false" />
      <div class="data-wrap" v-for="(yearItem,index) in dateList" :key="index">
        <div class="month">{{yearItem.year}}年</div>
        <ul class="month-list">
          <li v-for="(item,i) in yearItem.month" :key="i" @click="handleSelect(yearItem.year,item)">
            <div class="month">{{item}}月</div>
            <div class="money">¥{{getMoney(yearItem.year,item)}}</div>
          </li>
        </ul>
      </div>
    </div>
  </mt-popup>
</template>
<script>
import Vue from "vue";
import moment from "moment";
import customHeader from "../../components/header/header";
export default {
  name: "calendarMonth",
  data() {
    return {
      popupVisible: false,
      dateList: [],
      moneyList: []
    };
  },
  methods: {
    popupShow() {
      this.popupVisible = true;
    },
    popupHide() {
      this.popupVisible = false;
    },
    getMoney(year, month) {
      let money = "0.00";
      if (month < 10) {
        month = "0" + month;
      }
      let d = "" + year + month;
      this.moneyList.map((item) => {
        if (item.bizDate == d) {
          money = item.payAmt;
        }
      });
      return money;
    },
    generate() {
      const d = new Date();
      let y = d.getFullYear();
      var m = d.getMonth() + 1;
      let arr = [];//前一年
      let arr2 = [];//当前年
      for (let i = m - 6 + 1; i <= m; i++) {
        let year = i <= 0 ? y - 1 : y;
        let month = i <= 0 ? i + 12 : i;
        if (i <= 0) {
          arr.push(month);
        } else {
          arr2.push(month);
        }
      }

      if (arr.length) {
        this.dateList.push({ year: y - 1, month: arr });
        this.dateList.push({ year: y, month: arr2 });
      } else {
        this.dateList.push({ year: y, month: arr2 });
      }
      const min=new Date(`${this.dateList[0].year}/${this.dateList[0].month[0]}/${1}`).getTime();
      this.$emit("rangeMin", { reportType: "month", value:min});
    },
    handleSelect(year, month) {
      const start = new Date(`${year}/${month}/${1}`).setDate(1);
      const end= moment(start).endOf('month').valueOf();
      this.$emit("reportSelect", { reportType: "month", dateLabel: `${year}年${month}月`, dateScope: { startDate: start, endDate: end } });
      this.popupHide();
    },
    reqData(startDate, endDate) {
      // 分类型查询:1、按月查询每天数据；2，按月查询每周数据；3：按年查询每月数据
      const param = { type: 3, startDate: startDate, endDate: endDate };
      this.ajax({
        url: "/merchantApp/businessReport/queryTradeDaysSummaryList.do",
        type: "post",
        data: param
      })
        .then(result => {
          if (result.success) {
            this.moneyList = result.resultObject;
          } else {
            Toast(result.msg);
          }
        })
        .catch(function (err) {

        });
    },
  },
  created() {
    this.generate();
  },
  watch: {
    popupVisible(v) {
      if (v && this.moneyList.length === 0) {
        const cur = new Date();
        let sm = new Date(moment().subtract(6, 'months'));
        let s = new Date(`${sm.getFullYear()}/${sm.getMonth() + 1}/1`).getTime();
        this.reqData(s, cur.getTime());
      }
    }
  },
  components: {
    customHeader
  },
};
</script>
<style lang='scss'>
@import "calendar";
</style>
